<template>
  <TabPane
    :name="name"
    :label="label"
  >
    <p v-if="tracks.length === 0">
      资源正在赶来的路上
    </p>
    <TrackTabList
      :list="tracks"
      class="app-track-list"
    />
  </TabPane>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { Track, getTracks } from '@/api/resources'
import { cdn } from '@/utils'
import TrackTabList from './TrackTabList.vue'

@Component({
  name: 'TrackTab',
  components: {
    TrackTabList
  }
})
export default class extends Vue {
  private readonly name = 'track'
  private readonly label = '伴奏 / 人声'
  @Prop() songId!: number
  private tracks: Track[] = []

  get params (): CreateQueryParams {
    return {
      search: {
        'relatedSong.id': this.songId
      },
      join: [
        { field: 'file' },
        { field: 'relatedSong', select: ['id'] },
        { field: 'uploadedByUser', select: ['id', 'username', 'avatar'] }
      ]
    }
  }

  async created () {
    this.tracks = (await getTracks(this.params)).data
  }

  private fullUrl (path: string) {
    return cdn(path)
  }
}
</script>

<style lang="less" scoped>

.app-track-list {
  width: 100%;
}
</style>
